<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-s-ticket"></i> 投票</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-card class="box-card" v-for="(item,index) in votes" :key="index" style="margin-top:25px;">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="投票标题">
                        <span>{{item.voteTitle}}</span>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <span>{{item.voteTime}}</span>
                    </el-form-item>
                    <el-form-item label="选项">
                        <div v-for="(option,optionindex) in item.voteOption" :key="optionindex" style="margin-top:30px;">
                            <div>{{option.voteOptionContent}}</div><el-progress :percentage="isNaN(option.voteNum/item.voteNum)?0:option.voteNum/item.voteNum"></el-progress>
                        </div>
                    </el-form-item>
                </el-form>
                <div style="text-align:center;">
                    <el-button type="primary"  @click="showvote(item.voteId)">投票</el-button>
                </div>
            </el-card>
        </div>

         <!-- 投票弹出框 -->
        <el-dialog title="投票" :visible.sync="voteVisible" width="50%">
            <el-form ref="form" :model="vote" label-width="80px">
                <el-form-item label="投票标题">
                    <span>{{vote.voteTitle}}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                    <span>{{vote.voteTime}}</span>
                </el-form-item>
                <el-form-item label="选项">
                    <div v-for="(option,optionindex) in vote.voteOption" :key="optionindex" style="margin-top:30px;">
                        <el-radio v-model="selectid" :label="option.voteOptionId" >{{option.voteOptionContent}}</el-radio>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="votemethod">投票</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import {userVotes,userVoteById,uservote} from '@/api'

    export default {
        name: 'tabs',
        data() {
            return {
                votes: [],
                voteVisible: false,
                vote: '',
                selectid: ''
            }
        },
        methods: {
            votemethod(){
                let formdata = new FormData()
                formdata.append('voteRecordVoteId',this.vote.voteId)
                formdata.append('voteRecordOptionId',this.selectid)
                uservote(formdata).then(res => {
                    if (res.code === 0) {
                        this.voteVisible = false
                        this.userVotes()
                        this.$message({
                            type: 'success',
                            message: '投票成功'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '投票失败，'+res.msg
                        })
                    }
                })
            },
            showvote(id){
                this.voteVisible = true
                userVoteById(id).then(res => {
                    this.vote = res.data
                })
            },
            handleRead(index) {
                const item = this.unread.splice(index, 1);
                console.log(item);
                this.read = item.concat(this.read);
            },
            handleDel(index) {
                const item = this.read.splice(index, 1);
                this.recycle = item.concat(this.recycle);
            },
            handleRestore(index) {
                const item = this.recycle.splice(index, 1);
                this.read = item.concat(this.read);
            },
            userVotes(){
                userVotes().then(res => {
                    this.votes = res.data
                })
            }
        },
        mounted(){
            this.userVotes()
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

